<template>
  <div class="app">
    <div class="mvvideo" v-if="Object.keys(mvdata).length != 0">
      <div class="mvvideo-back">
      <video :src="mvdataurl" controls></video>
      </div>
      <div class="mvvideo-info">
        <h3>{{ mvdata.name }}</h3>
        <p class="mvvideo-artistName">歌手：{{ mvdata.artistName }}</p>
        <p class="mvvideo-pushtime">发行时间：{{ mvdata.publishTime }}</p>
        <span class="mvvideo-playcount">播放量：{{ mvdata.playCount }}次</span>
      <hr />
    </div>
    <div class="comments-head">
    <h3>精彩评论</h3>
    <div class="comments" v-for="item in mvcomment" :key="item.commentId">
     <div class="comment-wrap">
			        <div class="photo">
                <img class="avatar" :src="item.user.avatarUrl" alt="">
			        </div>
			        <div class="comment-block">
                <p class="span">{{item.user.nickname}}</p>
			            <p class="comment-text">{{item.content}}</p>
			            <div class="bottom-comment">
			                <div class="comment-date">{{item.time | toDate}}</div>
			                <ul class="comment-actions">
			                    <li class="complain"><span class="mui-icon mui-icon-star"></span>{{item.likedCount}}</li>
			                    <li class="reply"><span class="mui-icon mui-icon-chatbubble"></span></li>
			                </ul>
			            </div>
			        </div>
			    </div>
      </div>
    </div>
  </div>
  </div>
</template>

    
<script>
export default {
  props: ["id"],
  data() {
    return {
      mvdata: [],
      mvcomment:[],
      today:" " ,
      mvdataurl:''
    };
  },
  created() {
    this.getMvdata();
    this.getMvComment();
    this,this.getMvurl();
  },
  filters:{
    toDate(value){
      var Onedate = new Date(value)
		  return Onedate.getFullYear()+'-'+(Onedate.getMonth()+1)+'-'+Onedate.getDate()
    }
  },
  methods: {
    getMvdata() {
      this.$http
        .get("/mv/detail?mvid="+ this.id)
        .then((response) => {
          if (response.data.code == 200) {
            this.mvdata = response.data.data;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getMvurl() {
      this.$http
        .get("/mv/url?id="+ this.id)
        .then((response) => {
          if (response.data.code == 200) {
            this.mvdataurl = response.data.data.url;
            
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getMvComment(){
      this.$http.get('/comment/mv?id='+this.id)
      .then((response)=>{
        if(response.data.code==200){
          this.mvcomment=response.data.hotComments;
          
        }
      })
      .catch(function (error) {
          console.log(error);
        });
    }
  },
};
</script>

<style lang="scss">

.app {
  margin: 0px, 0px;
  background-color: white;
  .mvvideo {
    video {
      width: 98%;
    }
    .mvvideo-back{
      background-color: #000;
    }
    .mvvideo-info {
      position: relative;
      h3{
        text-align: left;
        margin: 10px 10px;
      }
      .mvvideo-artistName{
        color: #669EC7;
      }
      .mvvideo-pushtime{
        color: #9B9B9B;
      }
      p{
        font-size: 15px;
        text-align: left;
        margin: 10px 10px;
      }
      span{
        font-size:10px;
        position:absolute;
        top:10px;
        right: 10px;
        color: #9B9B9B;

      }
      hr{
        width: 95%;
        
      }
    }
  }
  h3{
    text-align: left;
    margin-top: 15px;
    margin-left: 15px;
    margin-bottom: 40px;
    font-size: 20px;
  }
  html,
		body {
		    background-color: #f0f2fa;
		    font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
		    color: #555f77;
		    -webkit-font-smoothing: antialiased;
		}
		input,
		textarea {
		    outline: none;
		    border: none;
		    display: block;
		    margin: 0;
		    padding: 0;
		    -webkit-font-smoothing: antialiased;
		    font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
		    font-size: 1rem;
		    color: #555f77;
		}
		input::-webkit-input-placeholder,
		textarea::-webkit-input-placeholder {
		    color: #ced2db;
		}
		input::-moz-placeholder,
		textarea::-moz-placeholder {
		    color: #ced2db;
		}
		input:-moz-placeholder,
		textarea:-moz-placeholder {
		    color: #ced2db;
		}
		input:-ms-input-placeholder,
		textarea:-ms-input-placeholder {
		    color: #ced2db;
		}
		p {
		    line-height: 1.3125rem;
		}
		.comments {
		    margin: 2.5rem auto 0;
		    max-width: 60.75rem;
		    padding: 0 1.25rem;
        
		}
		.comment-wrap {
		    margin-bottom: 1.25rem;
		    display: table;
		    width: 100%;
		    min-height: 5.3125rem;
		}
		.photo {
		    padding-top: 0.625rem;
		    display: table-cell;
		    width: 3.5rem;
		}
		.photo .avatar {
		    height: 2.25rem;
		    width: 2.25rem;
		    border-radius: 50%;
		    background-size: contain;
		}
		.comment-block {
		    padding: 1rem;
		    background-color: #fff;
		    display: table-cell;
		    vertical-align: top;
		    border-radius: 0.1875rem;
		    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
		}
		.comment-block textarea {
		    width: 100%;
		    max-width: 100%;
		}
		.comment-text {
		    margin-bottom: 1.25rem;
		}
		.bottom-comment {
		    color: #acb4c2;
		    font-size: 0.875rem;
		}
		.comment-date {
		    float: left;
		}
		.comment-actions {
		    float: right;
		}
		.comment-actions li {
		    display: inline;
		}
		.comment-actions li.complain {
		    padding-right: 0.625rem;
		    border-right: 1px solid #e1e5eb;
		}
		.comment-actions li.reply {
		    padding-left: 0.625rem;
		}
    .span{
      text-align: left;
    }
}
</style>